<template>
  <view class="weight-picker-box" style="">
    <view class="title-box">
      <text>选择加注量</text>
      <text style="font-size: 24rpx">(公斤)</text>
    </view>
    <view class="weight-grid">
      <view
        v-for="(item, index) in weightArr"
        :key="index"
        class="flex-center item"
        :class="item === weight ? 'picked' : ''"
        @click="pick(item)"
      >
        {{ item }}
      </view>
      <view class="flex-center item" @click="customInput">自定义</view>
    </view>
  </view>
</template>

<script setup lang="ts">
const weightArr = [10, 30, 50, 70, 80];

defineProps<{ weight: number }>();

const emit = defineEmits(['custom-input', 'pick']);

function customInput() {
  emit('custom-input');
}
function pick(weight: number) {
  emit('pick', weight);
}
</script>

<style scoped lang="less">
.weight-picker-box {
  background-color: #fff;
  border-radius: 5px;
}
.title-box {
  padding: 20rpx;
  font-size: 32rpx;
  color: #333;
}

.weight-grid {
  padding: 0 20rpx 28rpx;
  display: grid;
  grid-template-columns: repeat(3, 180rpx);
  gap: 28rpx;

  .item {
    height: 80rpx;
    border: 2rpx solid rgba(179, 179, 179, 0.25);
    border-radius: 5px;
    box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(179, 179, 179, 0.25);
    color: #666;
    position: relative;

    &.picked {
      color: #1b91ff;
      border-color: #1b91ff;
    }
  }
}
</style>
